import React from 'react'
import routes from "./index";
import {Route, Link} from "react-router-dom";
import '../style/router/SimpleRouteList.scss'

class SimpleRouteList extends React.Component {
  render() {
    let routeLinks = routes.map((route) => {
      return (<li key={route.name}>
        <Link key={route.name} to={route.path}>{route.name}</Link>
      </li>);
    });

    let routeRoutes = routes.map((route) => {
      return (
        <Route key={route.name}
               path={route.path}
               component={route.component}
        />
      );
    });

    return (
      <div>
        <div className="SimpleRouteList">
          <ul className="SimpleRouteList-ul">
            {routeLinks}
          </ul>

          {routeRoutes}
        </div>
      </div>
    );
  }
}

export default SimpleRouteList;